<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	
<style>
.box1{
	width: 200px;
	height: 200px;
	background-color: red
}

</style>
<script>

window.onload=function(){
/* 点击按钮 修改box1的大小 */
//获取box
var box1=document.getElementsByClassName("box1")[0];
var btn=document.getElementById("btn01");
btn.onclick=function(){
	// 通过js修改元素内联样式  style="" 优先级高
	// 语法：元素.style.样式名=样式值【字符串】
	box1.style.width="300px";
	box1.style.height="300px";
	/* 
	css样式名含有减号 会认为是左减法 将样式名修改为驼峰法

	如果样式用使用了!important 该样式为最高优先级 js修改后失效
	 */
	box1.style.backgroundColor='yellow';
	
}

var btn2=document.getElementById("btn02");
btn2.onclick=function(){
	
	// 语法：元素.style.样式名
	// 通过style属性读取的【设置】也是内联样式的值 未设置就为空 无法读取样式表中样式
	alert(box1.style.width)
}

}

</script>	
</head>

<body>
	<div class="box1">
	</div>
	<br>
	<br>
	<button id="btn01">修改样式</button>
	<button id="btn02">读取样式</button>
</html>